<template>
    <div class="add">
        <img src="../assets/images/top.png" alt="" class="img">
        <div class="add-text">添加使用人</div>
        <div class="infomation">
            <div class="upload">
                <div class="box" @click="up(index)">
                    <van-uploader :after-read="afterRead" name="index">
                        <div class="uploader-content">
                            <img src="../assets/images/avater.png" alt="" class="avater" />
                            <!-- <img :src="uitem.headimgurl" alt="" class="avater" /> -->

                            <button class="btn-upload">请上传照片</button>
                        </div>
                    </van-uploader>

                </div>
            </div>
            <div class="item">
                <van-field v-model="value1" label="使用者姓名:" left-icon="contact-o" placeholder="请输入使用人姓名" />
                <van-field v-model="value1" label="使用者性别:" left-icon="contact-o" placeholder="请输入使用人性别" />
                <van-field v-model="value1" label="使用者手机:" left-icon="phone-circle-o" placeholder="请输入使用人手机号码" />
                <van-field v-model="value1" label="使用者SN:" left-icon="description-o" placeholder="请输入使用人SN" />
            </div>

            <button class="btn">确定</button>
            <button class="back">返回</button>
        </div>
    </div>
</template>

<script>


export default {
    data() {
        return {
            value1: ''


        };
    },
    components: {
        // LineChart
    },
    methods: {

    }
};
</script>

<style lang="less" scoped>
.add {
    width: 750px;
    background-color: #202C3D;
    padding-bottom: 30px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    box-sizing: border-box;



    .img {
        width: 750px;
        height: 400px;
    }

    .add-text {
        color: #e7e7e7;
        display: flex;
        justify-content: flex-start;
        margin-top: -300px;
        padding-left: 50px;
        font-size: 30px;
        font-weight: bold;
        margin-bottom: 20px;
        box-sizing: border-box;
    }

    .infomation {
        width: 690px;
        margin: 0 auto;


        background-color: #e7e7e7;
        padding: 20px 0;
        border-radius: 16px;
        padding-bottom: 50px;
        height: 500px;

        .upload {
            width: 690px;
            display: flex;
            justify-content: center;
            align-items: center;

            .uploader-content {
                width: 138px;

                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .avater {
                    width: 138px;
                    height: 138px;
                }

                .btn-upload {
                    width: 160px;
                    height: 40px;
                    background-color: #11b7f6;
                    color: #fff;
                    font-size: 20px;
                    font-weight: bold;
                    margin: 20px 0;
                    border-radius: 5px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }

        .item {
            background-color: #e7e7e7;
            border-radius: 0 0 16px 16px;
            height: 400px;

            /deep/.van-cell {
                background-color: #e7e7e7;

            }
        }

        .btn,
        .back {
            width: 690px;
            height: 80px;
            border-radius: 30px;
            background: linear-gradient(to left, #7215CB, #C01F96);
            color: #fff;
            font-size: 30px;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 50px;
        }

        .back {
            background: #40225E;
            margin-top: 30px;
        }
    }


}
</style>